<template>
  <div class="box">
    <Item mark="/" :sel="selected" @change="getVal">
        <template v-slot:tabimg>
            <img src="img/1.png" />
        </template>
         <template v-slot:active>
            <img src="img/1_.png" />
        </template>
    </Item>
    <Item mark="/Vantage" :sel="selected" @change="getVal">
        <template v-slot:tabimg>
            <img src="img/2.png" />
        </template>
        <template v-slot:active>
            <img src="img/2_.png" />
        </template>
    </Item>
    <Item mark="/ParkStatus" :sel="selected" @change="getVal">
        <template v-slot:tabimg>
            <img src="img/3.png" />
        </template>
        <template v-slot:active>
            <img src="img/3_.png" />
        </template>
    </Item>
    <Item mark="/ParkInvest" :sel="selected" @change="getVal">
       <template v-slot:tabimg>
            <img src="img/4.png" />
        </template>
        <template v-slot:active>
            <img src="img/4_.png" />
        </template>
    </Item>
  </div>
</template>

<script>
import Item from "./Item.vue"
export default {
    components:{
    Item
},
    data(){
        return {
            selected:"/"
        }
    },
    methods:{
        getVal(data){
            this.selected = data
        }
    }
    
}
</script>

<style scoped>
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box img{
        width: 150px;
        height: 60px;
    }
</style>